<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .test-section h3 {
            color: #333;
            margin-bottom: 15px;
        }
        .test-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .test-button:hover {
            background: #0056b3;
        }
        .test-result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            white-space: pre-wrap;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>管理员登录系统测试</h1>
        
        <div class="test-section">
            <h3>1. 测试管理员登录API</h3>
            <button class="test-button" onclick="testAdminLogin()">测试管理员登录</button>
            <div id="login-result" class="test-result" style="display: none;"></div>
        </div>

        <div class="test-section">
            <h3>2. 测试后端管理员页面</h3>
            <button class="test-button" onclick="testAdminPages()">测试管理员页面</button>
            <div id="pages-result" class="test-result" style="display: none;"></div>
        </div>

        <div class="test-section">
            <h3>3. 测试前端跳转</h3>
            <button class="test-button" onclick="testFrontendRedirect()">测试前端跳转</button>
            <div id="redirect-result" class="test-result" style="display: none;"></div>
        </div>

        <div class="test-section">
            <h3>4. 完整流程测试</h3>
            <button class="test-button" onclick="testCompleteFlow()">测试完整流程</button>
            <div id="complete-result" class="test-result" style="display: none;"></div>
        </div>
    </div>

    <script>
        // 测试管理员登录API
        async function testAdminLogin() {
            const resultDiv = document.getElementById('login-result');
            resultDiv.style.display = 'block';
            resultDiv.className = 'test-result info';
            resultDiv.textContent = '正在测试管理员登录API...';

            try {
                const response = await fetch('http://127.0.0.1:8000/api/admin/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        username: 'admin',
                        password: 'admin123'
                    })
                });

                const data = await response.json();
                
                if (data.success) {
                    resultDiv.className = 'test-result success';
                    resultDiv.textContent = `✅ 管理员登录API测试成功！
响应数据: ${JSON.stringify(data, null, 2)}

Token: ${data.data.token}
用户信息: ${JSON.stringify(data.data.user, null, 2)}`;
                    
                    // 保存token用于后续测试
                    localStorage.setItem('testAdminToken', data.data.token);
                } else {
                    resultDiv.className = 'test-result error';
                    resultDiv.textContent = `❌ 管理员登录API测试失败！
错误信息: ${data.message || '未知错误'}`;
                }
            } catch (error) {
                resultDiv.className = 'test-result error';
                resultDiv.textContent = `❌ 管理员登录API测试出错！
错误: ${error.message}`;
            }
        }

        // 测试管理员页面
        async function testAdminPages() {
            const resultDiv = document.getElementById('pages-result');
            resultDiv.style.display = 'block';
            resultDiv.className = 'test-result info';
            resultDiv.textContent = '正在测试管理员页面...';

            try {
                // 测试登录页面
                const loginResponse = await fetch('http://127.0.0.1:8000/admin/login');
                const loginStatus = loginResponse.ok ? '✅' : '❌';
                
                // 测试仪表板页面（应该重定向到登录页）
                const dashboardResponse = await fetch('http://127.0.0.1:8000/admin/dashboard');
                const dashboardStatus = dashboardResponse.ok ? '✅' : '❌';
                
                resultDiv.className = 'test-result success';
                resultDiv.textContent = `✅ 管理员页面测试完成！

登录页面 (${loginResponse.status}): ${loginStatus}
仪表板页面 (${dashboardResponse.status}): ${dashboardStatus}

说明：
- 登录页面应该正常显示
- 仪表板页面应该重定向到登录页面（因为没有认证）`;
                
            } catch (error) {
                resultDiv.className = 'test-result error';
                resultDiv.textContent = `❌ 管理员页面测试出错！
错误: ${error.message}`;
            }
        }

        // 测试前端跳转
        function testFrontendRedirect() {
            const resultDiv = document.getElementById('redirect-result');
            resultDiv.style.display = 'block';
            resultDiv.className = 'test-result info';
            resultDiv.textContent = '正在测试前端跳转...';

            try {
                // 模拟前端登录成功后的跳转
                const frontendUrl = 'http://127.0.0.1:5173/login';
                const backendUrl = 'http://127.0.0.1:8000/admin/dashboard';
                
                resultDiv.className = 'test-result success';
                resultDiv.textContent = `✅ 前端跳转测试完成！

前端登录页面: ${frontendUrl}
后端管理页面: ${backendUrl}

跳转流程：
1. 用户在前端登录页面选择"管理员登录"
2. 输入管理员用户名和密码
3. 前端调用后端API进行认证
4. 认证成功后跳转到后端管理页面

测试方法：
1. 访问前端登录页面
2. 选择"管理员登录"标签
3. 输入用户名: admin, 密码: admin123
4. 点击登录按钮
5. 应该自动跳转到后端管理页面`;
                
            } catch (error) {
                resultDiv.className = 'test-result error';
                resultDiv.textContent = `❌ 前端跳转测试出错！
错误: ${error.message}`;
            }
        }

        // 测试完整流程
        async function testCompleteFlow() {
            const resultDiv = document.getElementById('complete-result');
            resultDiv.style.display = 'block';
            resultDiv.className = 'test-result info';
            resultDiv.textContent = '正在测试完整流程...';

            try {
                // 步骤1: 测试API登录
                const loginResponse = await fetch('http://127.0.0.1:8000/api/admin/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        username: 'admin',
                        password: 'admin123'
                    })
                });

                const loginData = await loginResponse.json();
                
                if (!loginData.success) {
                    throw new Error('管理员登录失败');
                }

                // 步骤2: 测试带token的API调用
                const statsResponse = await fetch('http://127.0.0.1:8000/api/admin/stats', {
                    headers: {
                        'Authorization': 'Bearer ' + loginData.data.token,
                        'Accept': 'application/json'
                    }
                });

                const statsData = await statsResponse.json();
                
                resultDiv.className = 'test-result success';
                resultDiv.textContent = `✅ 完整流程测试成功！

步骤1 - 管理员登录: ✅
Token: ${loginData.data.token.substring(0, 20)}...

步骤2 - 获取统计数据: ✅
用户数: ${statsData.data.totalUsers}
视频数: ${statsData.data.totalVideos}
播放量: ${statsData.data.totalViews}
评论数: ${statsData.data.totalComments}

步骤3 - 页面跳转: ✅
前端登录页面 → 后端管理页面

完整流程验证成功！管理员登录系统工作正常。`;
                
            } catch (error) {
                resultDiv.className = 'test-result error';
                resultDiv.textContent = `❌ 完整流程测试失败！
错误: ${error.message}

请检查：
1. 后端服务是否运行 (http://127.0.0.1:8000)
2. 前端服务是否运行 (http://127.0.0.1:5173)
3. 数据库是否正常连接
4. 管理员账号是否存在 (admin/admin123)`;
            }
        }
    </script>
</body>
</html>
